<template>
	<div>
		<div class="selectBox" v-show="tabIndex!=5">
			<div v-show="tabIndex == 0">
				<p class="select-title" style="margin-bottom: 4.27vw;">滚动模式</p>
				<div class="scrollMode-box">
					<image src="../../../static/img/vertical.png" mode="aspectFill" class="scrollImg"
					:class="{'vertical':select.length == 8,'unSelectMode':select.length != 8}"
						@tap="scrollMode('vertical')"></image>
					<image src="../../../static/img/cross.png" mode="aspectFill" class="scrollImg"
					:class="{'cross':select.length == 5,'unSelectMode':select.length != 5}"
						@tap="scrollMode('cross')"></image>
				</div>
				<p class="select-title" style="margin-bottom: 4.27vw;margin-top: 6.4vw;">大小</p>
				<slider :value="sizeValue" step="1" @change="sizeEnd" max="100" block-color="#fff" activeColor="#FFFFFF"
					backgroundColor="#313131" block-size="24" min="1"></slider>
				<!-- <u-slider v-model="sizeValue" step="10" max="100" active-color="#fff" inactive-color="#313131" block-width="48" height="8" block-color="#fff" @end="sizeEnd"></u-slider> -->
				<!-- <u-slider v-model="sizeValue" step="1" :max="100" active-color="#fff" inactive-color="#313131" block-width="48" height="8" block-color="#fff" @end="sizeEnd"></u-slider> -->
				<!-- <u-slider v-model="sizeValue" max="100"></u-slider> -->
				<p class="color-text" style="margin-top: 6.4vw;">推荐颜色</p>
				<div>
					<div class="square-box">
						<p class="square" v-for="(item,index) in recommendOne" :style="{background:item.background}"
							@click="sizeColor(item.background,index)"></p>
					</div>
					<p class="color-text" style="margin-top: 6.4vw;">自定义颜色(红、绿、蓝、透明度)</p>
					<div style="margin-top: 6.93vw;">
						<slider v-for="(item,index) in sliderOne" v-model="item.colorValue" :blockColor="item.color"
							:activeColor="item.color" @change="oneColor($event,index)" block-size="24" :max="item.max"
							step="1" backgroundColor="#313131">
						</slider>
					</div>
				</div>
			</div>
			<div v-show="tabIndex == 1">
				<p class="select-title" style="margin-bottom: 4.27vw;">范围</p>
				<slider v-model="scopeValue" step="1" @change="scopeEnd" max="100" block-color="#fff"
					activeColor="#FFFFFF" backgroundColor="#313131" block-size="24" min="1"></slider>
				<p class="color-text" style="margin-top: 6.4vw;">推荐颜色</p>
				<div>
					<div class="square-box">
						<p class="square" v-for="(item,index) in recommendOne" :style="{background:item.background}"
							@click="textShadow(item.textShadowColor,index)"></p>
					</div>
					<p class="color-text" style="margin-top: 6.4vw;">自定义颜色(红、绿、蓝、透明度)</p>
					<div style="margin-top: 6.93vw;">
						<slider v-for="(item,index) in sliderTwo" v-model="item.colorValue" :blockColor="item.color"
							:activeColor="item.color" block-size="24" :max="item.max" step="1"
							@change="twoColor($event,index)" backgroundColor="#313131">
						</slider>
					</div>
				</div>
			</div>
			<div v-show="tabIndex == 2">
				<p class="color-text" style="margin-bottom: 4.27vw;">推荐颜色</p>
				<div>
					<div class="square-box">
						<p class="square" v-for="(item,index) in backgroundColorList" :style="{background:item.color}"
							@click="backgroundColor(item.color,index)"></p>
						<image src="../../../static/img/upLoad.png" mode="aspectFill" class="upLoadImg"
							@tap="upLoadPhoto"></image>
					</div>
					<p class="select-title" style="margin-top: 6.4vw;">自定义颜色(红、绿、蓝、透明度)</p>
					<div style="margin-top: 6.93vw;">
						<slider v-for="(item,index) in sliderThree" v-model="item.colorValue" :blockColor="item.color"
							:activeColor="item.color" block-size="24" :max="item.max" step="1"
							@change="threeColor($event,index)" backgroundColor="#313131">
						</slider>
					</div>
					<!-- <div class="color-text" style="margin-bottom: 4.27vw;background-color: pink;">点击上传图片</div> -->
				</div>
			</div>
			<div v-show="tabIndex == 3">
				<p class="color-text" style="margin-bottom: 6.93vw;">向右滑动变快</p>
				<slider v-model="speedValue" @change="speedEnd" max="100" step="1" block-color="#fff"
					activeColor="#FFFFFF" backgroundColor="#313131" block-size="24" min="1"></slider>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			tabIndex: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				sizeValue: 50,
				recommendOne: [
					// {
					// 	background: "#ffffff",
					// 	colorValue: 100,
					// 	textShadowColor: "#ffffff",
					// 	backgroundColor: "#ffffff"
					// },
					{
						background: "#ff0000",
						colorValue: 100,
						textShadowColor: "#ff0000",
						backgroundColor: "#ff0000"
						// 255,0,0
					},
					{
						background: "#00FF00",
						colorValue: 0,
						textShadowColor: "#00FF00",
						backgroundColor: "#00FF00"
						// 0,255,0
					},
					{
						background: "#0000FF",
						colorValue: 0,
						textShadowColor: "#0000FF",
						backgroundColor: "#0000FF"
						// 0,0,255

					},
					{
						background: "#ffffff",
						colorValue: 0,
						textShadowColor: "#ffffff",
						backgroundColor: "#ffffff"
						// 255,255,255

					},
					{
						background: "#FFFF00",
						colorValue: 0,
						textShadowColor: "#FFFF00",
						backgroundColor: "#FFFF00"
						// 255,255,0
					},
					{
						background: "#FF00FF",
						colorValue: 0,
						textShadowColor: "#FF00FF",
						backgroundColor: "#FF00FF"
						// 255,0,255
					},
					{
						background: "#FF4500",
						colorValue: 0,
						textShadowColor: "#FF4500",
						backgroundColor: "#FF4500"
						// 255,69,0
					},
				],
				sliderOne: [{
						color: "red",
						colorValue: 255,
						max: 255
					},
					{
						color: "green",
						colorValue: 255,
						max: 255
					},
					{
						color: "blue",
						colorValue: 255,
						max: 255
					},
					{
						color: "#fff",
						colorValue: 10,
						max: 10
					}
				],
				sliderTwo: [{
						color: "red",
						colorValue: 255,
						max: 255
					},
					{
						color: "green",
						colorValue: 255,
						max: 255
					},
					{
						color: "blue",
						colorValue: 255,
						max: 255
					},
					{
						color: "white",
						colorValue: 10,
						max: 10
					}
				],
				sliderThree: [{
						color: "red",
						colorValue: 255,
						max: 255
					},
					{
						color: "green",
						colorValue: 255,
						max: 255
					},
					{
						color: "blue",
						colorValue: 255,
						max: 255
					},
					{
						color: "white",
						colorValue: 10,
						max: 10
					}
				],
				backgroundColorList: [{
						color: "#000000"
					},
					{
						color: "#ff0000"
					},
					{
						color: "#00FF00"
					},
					{
						color: "#0000FF"
					},
					{
						color: "#FFFFff"
					},
					// {
					// 	color:"#FFFF00"
					// },
					// {
					// 	color:"#FF00FF"
					// }
				],
				tab: null,
				scopeValue: 1,
				speedValue: 1,
				colorOne: "",
				colorTwo: "",
				colorThree: "",
				backgroundImg: [],
				select: "vertical"
			}
		},
		watch: {
			tabIndex: {
				handler(newVal, oldVal) {
					this.tab = newVal;
				}
			},
		},
		methods: {
			sizeEnd(e) {
				this.sizeValue = e.detail.value;
				this.$emit('sizeEnd', this.sizeValue)
			},
			scopeEnd(e) {
				this.scopeValue = e.detail.value;
				let indexColor = 3;
				this.$emit('scopeEnd', this.scopeValue, indexColor)
			},
			sizeColor(color, index) {
				this.$emit('sizeColor', color);
				switch (index) {
					case 0:
						this.sliderOne[0].colorValue = 255;
						this.sliderOne[1].colorValue = 0;
						this.sliderOne[2].colorValue = 0;
						break;
					case 1:
						this.sliderOne[0].colorValue = 0;
						this.sliderOne[1].colorValue = 255;
						this.sliderOne[2].colorValue = 0;
						break;
					case 2:
						this.sliderOne[0].colorValue = 0;
						this.sliderOne[1].colorValue = 0;
						this.sliderOne[2].colorValue = 255;
						break;
					case 3:
						this.sliderOne[0].colorValue = 255;
						this.sliderOne[1].colorValue = 255;
						this.sliderOne[2].colorValue = 255;
						this.sliderOne[3].colorValue = 10;
						break;
					case 4:
						this.sliderOne[0].colorValue = 255;
						this.sliderOne[1].colorValue = 255;
						this.sliderOne[2].colorValue = 0;
						this.sliderOne[3].colorValue = 10;
						break;
					case 5:
						this.sliderOne[0].colorValue = 255;
						this.sliderOne[1].colorValue = 0;
						this.sliderOne[2].colorValue = 255;
						this.sliderOne[3].colorValue = 10;
						break;
					case 6:
						this.sliderOne[0].colorValue = 255;
						this.sliderOne[1].colorValue = 69;
						this.sliderOne[2].colorValue = 0;
						this.sliderOne[3].colorValue = 10;
						break;
				}
			},
			textShadow(color, index) {
				this.$emit('textShadow', color);
				switch (index) {
					case 0:
						this.sliderTwo[0].colorValue = 255;
						this.sliderTwo[1].colorValue = 0;
						this.sliderTwo[2].colorValue = 0;
						break;
					case 1:
						this.sliderTwo[0].colorValue = 0;
						this.sliderTwo[1].colorValue = 255;
						this.sliderTwo[2].colorValue = 0;
						break;
					case 2:
						this.sliderTwo[0].colorValue = 0;
						this.sliderTwo[1].colorValue = 0;
						this.sliderTwo[2].colorValue = 255;
						break;
					case 3:
						this.sliderTwo[0].colorValue = 255;
						this.sliderTwo[1].colorValue = 255;
						this.sliderTwo[2].colorValue = 255;
						this.sliderTwo[3].colorValue = 10;
						break;
					case 4:
						this.sliderTwo[0].colorValue = 255;
						this.sliderTwo[1].colorValue = 255;
						this.sliderTwo[2].colorValue = 0;
						this.sliderTwo[3].colorValue = 10;
						break;
					case 5:
						this.sliderTwo[0].colorValue = 255;
						this.sliderTwo[1].colorValue = 0;
						this.sliderTwo[2].colorValue = 255;
						this.sliderTwo[3].colorValue = 10;
						break;
					case 6:
						this.sliderTwo[0].colorValue = 255;
						this.sliderTwo[1].colorValue = 69;
						this.sliderTwo[2].colorValue = 0;
						this.sliderTwo[3].colorValue = 10;
						break;
				}
			},
			backgroundColor(color, index) {
				console.log(color)
				this.$emit('background', color)
				switch (index) {
					case 0:
						this.sliderThree[0].colorValue = 0;
						this.sliderThree[1].colorValue = 0;
						this.sliderThree[2].colorValue = 0;
						this.sliderThree[3].colorValue = 10;
						break;
					case 1:
						this.sliderThree[0].colorValue = 255;
						this.sliderThree[1].colorValue = 0;
						this.sliderThree[2].colorValue = 0;
						break;
					case 2:
						this.sliderThree[0].colorValue = 0;
						this.sliderThree[1].colorValue = 255;
						this.sliderThree[2].colorValue = 0;
						break;
					case 3:
						this.sliderThree[0].colorValue = 0;
						this.sliderThree[1].colorValue = 0;
						this.sliderThree[2].colorValue = 255;
						this.sliderThree[3].colorValue = 10;
						break;
					case 4:
						this.sliderThree[0].colorValue = 255;
						this.sliderThree[1].colorValue = 255;
						this.sliderThree[2].colorValue = 255;
						this.sliderThree[3].colorValue = 10;
						break;
					case 5:
						this.sliderThree[0].colorValue = 255;
						this.sliderThree[1].colorValue = 255;
						this.sliderThree[2].colorValue = 0;
						this.sliderThree[3].colorValue = 10;
						break;
					case 6:
						this.sliderThree[0].colorValue = 255;
						this.sliderThree[1].colorValue = 0;
						this.sliderThree[2].colorValue = 255;
						this.sliderThree[3].colorValue = 10;
						break;
				}
			},
			speedEnd(e) {
				// console.log(e)
				this.speedValue = e.detail.value
				this.$emit('speedEnd', this.speedValue)
			},
			oneColor(e, index) {
				switch (index) {
					case 0:
						this.sliderOne[0].colorValue = e.detail.value;
						break;
					case 1:
						this.sliderOne[1].colorValue = e.detail.value;
						break;
					case 2:
						this.sliderOne[2].colorValue = e.detail.value;
						break;
					case 3:
						this.sliderOne[3].colorValue = e.detail.value;
						break;
				}
				this.colorOne =
					`rgba(${this.sliderOne[0].colorValue},${this.sliderOne[1].colorValue},${0,0,this.sliderOne[2].colorValue},${0,0,0,this.sliderOne[3].colorValue})`
				this.$emit('sizeColor', this.colorOne);
				// console.log(this.colorOne)
			},
			twoColor(e, index) {
				switch (index) {
					case 0:
						this.sliderTwo[0].colorValue = e.detail.value;
						break;
					case 1:
						this.sliderTwo[1].colorValue = e.detail.value;
						break;
					case 2:
						this.sliderTwo[2].colorValue = e.detail.value;
						break;
					case 3:
						this.sliderTwo[3].colorValue = e.detail.value;
						break;
				}
				let twoColor =
					`rgba(${this.sliderTwo[0].colorValue},${this.sliderTwo[1].colorValue},${0,0,this.sliderTwo[2].colorValue},${0,0,0,this.sliderTwo[3].colorValue})`
				this.$emit('textShadow', twoColor);
			},
			threeColor(e, index) {
				switch (index) {
					case 0:
						this.sliderThree[0].colorValue = e.detail.value;
						break;
					case 1:
						this.sliderThree[1].colorValue = e.detail.value;
						break;
					case 2:
						this.sliderThree[2].colorValue = e.detail.value;
						break;
					case 3:
						this.sliderThree[3].colorValue = e.detail.value;
						break;
				}
				let threeColor =
					`rgba(${this.sliderThree[0].colorValue},${this.sliderThree[1].colorValue},${0,0,this.sliderThree[2].colorValue},${0,0,0,this.sliderThree[3].colorValue})`
				this.$emit('background', threeColor);
			},
			upLoadPhoto() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						console.log(res.tempFilePaths[0])
						let bgImg = res.tempFilePaths[0];
						this.$emit('backgroundImg', bgImg)
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			scrollMode(mode) {
				if (mode === "vertical"){
					this.select = "vertical";
				} else if (mode === "cross") {
					this.select = "cross";
				}
				this.$emit('scrollMode',mode)
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	slider {
		margin-top: 4.27vw;
		margin-left: 0;
	}

	.scrollMode-box {
		// .select{
		// 	filter: invert(100%) sepia(94%) saturate(0%) hue-rotate(172deg) brightness(106%) contrast(106%);
		// }
		// .unSelect{
		// 	filter: invert(35%) sepia(10%) saturate(21%) hue-rotate(44deg) brightness(85%) contrast(85%) !important;
			
		// }
		.vertical{
			opacity: 1;
			// filter: invert(0%) sepia(0%) saturate(7473%) hue-rotate(171deg) brightness(106%) contrast(106%) !important;
			// filter: invert(100%) sepia(94%) saturate(0%) hue-rotate(172deg) brightness(106%) contrast(106%);
			// filter: invert(37%) sepia(1%) saturate(1552%) hue-rotate(341deg) brightness(84%) contrast(89%) !important;
			// filter: invert(99%) sepia(100%) saturate(0%) hue-rotate(51deg) brightness(110%) contrast(102%);
			// filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(7deg) brightness(113%) contrast(101%);
		}
		.cross{
			opacity: 1;
			// filter: invert(0%) sepia(0%) saturate(7473%) hue-rotate(171deg) brightness(106%) contrast(106%) !important;
			// filter: invert(100%) sepia(94%) saturate(0%) hue-rotate(172deg) brightness(106%) contrast(106%);
			// filter: invert(100%) sepia(94%) saturate(0%) hue-rotate(172deg) brightness(106%) contrast(106%);
			// filter: invert(99%) sepia(100%) saturate(0%) hue-rotate(51deg) brightness(110%) contrast(102%);
		}
		.unSelectMode{
			opacity: 0.2;
			// filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(7deg) brightness(113%) contrast(101%);
			// filter: invert(31%) sepia(0%) saturate(20%) hue-rotate(142deg) brightness(76%) contrast(62%);
		}
		.scrollImg {
			width: 12.8vw;
			height: 8.53vw;
			margin-right: 2.67vw;
		}
	}

	.selectBox {
		margin: 0 5.33vw 2.67vw 5.33vw;
		padding: 6.4vw 5.33vw 8.53vw 5.33vw;
		width: 89.33vw;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4.27vw;
		position: absolute;
		left: 0;
		bottom: 7.67vw;
		display: block;
		color: #fff;
		z-index: 1;

		.select-title {
			// margin-bottom: 5.33vw;
			font-size: 4.27vw;
			color: #FFFFFF;
			font-weight: 300;
		}


		.square-box {
			margin-top: 4.27vw;
			display: flex;
			// justify-content: space-evenly;

			.square {
				width: 8.53vw;
				height: 8.53vw;
				border-radius: 2.13vw;
				margin-right: 2.67vw;
			}

			.upLoadImg {
				width: 19.2vw;
				height: 8.53vw;
			}
		}
	}
</style>
